body {
    margin: 0;
    padding: 0;
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff center top;
    /* 修改为白色背景 */
}

.loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 18px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
}

.loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #aaa;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
}

.loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
}

.loading2 {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
    border-radius: .625rem
}

.loadingRemove {
    display: none
}

.loadingAdd {
    display: block
}

/* 弹窗样式 */
.popup {
    width: 111.2rem;
    height: 58.5rem;
    background: linear-gradient(to bottom, rgba(30, 31, 37, 0.95), rgba(30, 31, 37, 0.9));
    border-radius: .625rem;
    box-shadow: 0 0 .9375rem rgba(0, 0, 0, 0.2);
    /* display: flex;
    justify-content: center;
    align-items: center; */
    position: relative;

    text-align: center;

}



/* 手术台次等居中 */
.textmiddle {
    text-align: center;
    margin-top: 3rem;
    list-style: none;
    /* 去掉列表序号 */
    padding: 0;

}

#tab1 span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2.8rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    color: #1293D2;
}

#tab1-div {
    width: 2.5rem;
    height: 0.25rem;
    background: linear-gradient(360deg, #007CD3 0%, #3BC7CF 100%);
    border-radius: 2px 2px 2px 2px;
    margin: auto;
}

#tab2 span {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2.8rem;
    text-align: center;
    font-style: normal;
    text-transform: none;
    color: #B0B8CD;
}

#tab2-div {
    width: 2.5rem;
    height: 0.25rem;
    background: linear-gradient(360deg, #007CD3 0%, #3BC7CF 100%);
    border-radius: 2px 2px 2px 2px;
    margin: auto;
    display: none;
}


#dynamic-list li {
    text-align: center;
    /* 使列表项内容居中对齐 */
    font-size: 1.6rem;
    font-weight: 540;

}

/* 框you的样式 */
.boxRight {
    position: relative;
    /* top: 0.28rem; */
    height: 48rem;

    /* 边框颜色和粗细 */
    box-sizing: border-box;
    /* 包括内边距和边框 */
    background-color: #222B38;

    z-index: 5;

}

.operState {
    position: absolute;
    border: .125rem solid blue;
    padding: .625rem;
    background-color: lightblue;
    text-align: center;
    width: 5rem;
    height: 1.5rem;
    left: 87.5rem;
    border-radius: .625rem;
}

/* 框zuo的样式 */
.boxLeft {
    position: absolute;
    top: 5.18rem;
    left: 1.8rem;
    width: 11.8rem;
    height: 52.5rem;
    bottom: 2.5rem;
    border: .125rem solid #46506D;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #232C3B, #20282E);
    border-radius: .625rem;
}


/* 事件广场
*/
.squareMiddle {
    position: absolute;
    top: 11.88rem;
    left: 33rem;
    width: 11.8rem;
    height: 47.95rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    border-radius: .625rem;
    color: #B1BAC7;
}




/* 事件广场无数据 */
.squareImg {
    position: absolute;
    top: -3.64rem;
    width: 16.875rem;
    height: 9rem;
    left: -2.5rem;
    border-radius: .625rem;
    background: url('picture/xinxi.png') no-repeat center center;
    background-size: 38% 68%;
    background-position: center 36%;
}

.squareText {
    position: absolute;
    top: -3.64rem;
    width: 16.875rem;
    height: 9rem;
    left: -4.5rem;
    border-radius: .625rem;


    background-position: center 36%;
}

/* 事件广场无数据时文案位置 */
.no-data-message {
    position: absolute;
    font-size: 1.1rem;
    color: #B0B8CD;
    top: -4rem;
    left: -1.5rem;
}

/* 事件广场标签 */
.custom-ul {
    position: relative;
    /* 改为 relative，避免可能的定位问题 */
    width: 100%;
    /* 设置为100%，确保宽度适应父容器 */
    list-style-type: none;
    border: 0.0625rem solid #ccc;
    border-radius: 0.3125rem;
    max-height: 115rem;
    /* 确保有足够的内容高度用于滚动 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    /* 清除默认的外边距 */
}

/* 事件广场标签 */
.custom-ul3 {
    position: relative;
    /* 改为 relative，避免可能的定位问题 */
    width: 100%;
    /* 设置为100%，确保宽度适应父容器 */
    list-style-type: none;
    border: 0.0625rem solid #ccc;
    border-radius: 0.3125rem;
    max-height: 115rem;
    /* 确保有足够的内容高度用于滚动 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    /* 清除默认的外边距 */
}


.custom-li {
    width: 98%;
    box-sizing: border-box;
    padding: .625rem;
    font-size: .875rem;
    color: #CDD4DF;
    word-wrap: break-word;
    background-color: #878F9E;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 350;
    font-family: PingFang SC, PingFang SC;
    border-radius: .625rem;
    margin: 1rem 0;
    /* 增加上下间隔 1rem */
}

.list-item-out2 {
    position: absolute;
    top: -7.48rem;
    left: -19.8rem;
    width: 50rem;
    height: 18rem;
    overflow-y: auto;
    border: #ACB5C2;
    padding: 0;
    overflow-y: auto;
}

.list-item-out3 {
    position: absolute;
    top: -7.48rem;
    left: -30.8rem;
    width: 50rem;
    height: 18rem;
    overflow-y: auto;
    border: #ACB5C2;
    padding: 0;
    overflow-y: auto;
}


.list-item-out {
    position: absolute;
    top: -7.48rem;
    left: -30.8rem;
    width: 50rem;
    height: 18rem;
    overflow-y: auto;
    border: #ACB5C2;
    padding: 0;
    overflow-y: auto;
}

#squareDiv {
    height: 20%;
    overflow-y: auto;

    /* 允许内部内容垂直滚动 */
}



.gray-color {
    color: gray;
}



/* 房间list的样式 */
.list-item-out {
    position: absolute;
    top: 1.88rem;
    left: -1.8rem;
    width: 15.3rem;
    height: 44rem;
    overflow-y: auto;
}

/* 滚动条样式 */
.list-item-out::-webkit-scrollbar {
    width: .625rem;
    /* 滚动条的宽度 */
    background-color: rgba(0, 0, 0, 0);
    /* 滚动条背景初始为完全透明 */
}

.list-item-out::-webkit-scrollbar-thumb {
    background-color: rgba(176, 184, 205, 0.6);
    border-radius: .625rem;
    /* 滑块圆角 */
    transition: background-color 0.3s ease;
    /* 添加过渡效果 */
}

.list-item-out::-webkit-scrollbar-thumb:hover {
    background-color: rgba(85, 85, 85);
    /* 鼠标悬停时滑块变为不透明 */
}

.list-item-out::-webkit-scrollbar-track {
    background-color: #35373E;
    /* 轨道初始透明度为50% */
    border-radius: .625rem;
}

/* 2 */
.list-item-out2::-webkit-scrollbar {
    width: .625rem;
    background-color: rgba(0, 0, 0, 0);

}

.list-item-out2::-webkit-scrollbar-thumb {
    background-color: rgba(176, 184, 205, 0.2);
    border-radius: .625rem;
    transition: background-color 0.3s ease;
}

.list-item-out2::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0);
}

.list-item-out2::-webkit-scrollbar-track {
    background-color: #35373E;

}

/* 3 */
.list-item-out3::-webkit-scrollbar {
    width: .625rem;
    background-color: rgba(0, 0, 0, 0);

}

.list-item-out3::-webkit-scrollbar-thumb {
    background-color: rgba(176, 184, 205, 0.2);
    border-radius: .625rem;
    transition: background-color 0.3s ease;
}

.list-item-out3::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0);
}

.list-item-out3::-webkit-scrollbar-track {
    background-color: #35373E;

}

.boxOpening {
    left: 300rem;
    top: 3rem;
    width: 10rem;
    height: 5rem;
    background-color: #007BFF;
    /* 蓝色背景 */
    color: white;
    /* 白色文本 */
    padding: 20px;
    /* 内边距 */
    border-radius: 10px;
    /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    text-align: center;
    /* 文本居中 */
    font-size: 24px;
    /* 字体大小 */
    font-weight: bold;
    /* 字体加粗 */
}




/* 应用于每个 <li> */
.list-item {
    position: relative;
    list-style-type: none;
    /* 移除默认的列表项序号 */
    padding-left: 0;
    /* 移除列表项的缩进 */
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
    text-align: center;
    color: #B0B8CD;

    letter-spacing: 0;
    /* 设置上下间隔 */
    margin-top: .2rem;
    margin-bottom: .3rem;
    cursor: pointer;
    /* 悬停时显示手型光标 */

    /* 新增的样式 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* 确保元素高度占满父容器 */
}

.list-item {
    cursor: pointer;
    padding: 0;
    /* 设置内边距，控制背景颜色的显示范围 */
    left: 3.3rem;
    width: 9rem;
    height: 4rem;

}

.list-item.selected {
    color: #11CABE;
    /* 选中后的字体颜色 */
    background: linear-gradient(to right, rgba(29, 200, 189, 0.2) 0%, rgba(17, 202, 190, 0) 100%);
    /* 选中后的背景颜色，从左到右逐渐变浅 */
    border-radius: .625rem;
}

.active {
    color: #11CABE;
    /* 点击后的颜色 */
}

/* 框you-左上的样式 */
.boxRight0 {
    position: absolute;
    top: 1.44rem;
    /* 2.3% of 1080px */
    left: 1.42rem;
    /* 1.42% of 1920px */
    width: 19.8rem;
    height: 19.7rem;
    bottom: 2.5rem;
    border: .125rem solid #202935;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    border-radius: .625rem;
    text-align: left;
    padding-top: .015rem;
    /* .24px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 2.8rem;
    /* Equivalent to 28.8px */
    color: #D7FCFF;
    font-weight: 600;
    font-family: PingFang SC-Semibold;

}


.boxRightTop {
    position: absolute !important;
    top: 1.74rem !important;
    left: 11.42rem !important;
    min-width: 20rem !important;
    max-width: 70rem !important;
    min-height: 3rem !important;
    max-height: 6rem !important;
    padding: .65rem .9375rem !important;
    border: .125rem solid #202935 !important;
    box-sizing: border-box !important;
    background: linear-gradient(to right, #253B49, #202935) !important;
    border-radius: .625rem !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    font-size: 1.5rem !important;
    color: white !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}



/* 框you-时间的样式 手术时长*/
.boxRightTime {
    position: absolute;
    top: .68rem;
    left: .68rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 2rem;
    /* Equivalent to 16px */
    color: #0297FD;
    font-family: PingFang SC-Semibold;
}

/* 麻醉时长 */
.boxRightTimeAn {
    position: absolute;
    top: .68rem;
    left: 25.68rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 2rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 进度时间 */
.boxRightProcessTimeDiv1 {
    position: absolute;
    top: 5.3rem;
    left: 4rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv2 {
    position: absolute;
    top: 5.3rem;

    left: 10.3rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3em;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv3 {
    position: absolute;
    top: 5.3rem;

    left: 16.6rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv4 {
    position: absolute;
    top: 5.3rem;

    left: 23.2rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv5 {
    position: absolute;
    top: 5.3rem;

    left: 29.6rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv6 {
    position: absolute;
    top: 5.3rem;

    left: 35.9rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度时间 */
.boxRightProcessTimeDiv7 {
    position: absolute;
    top: 5.3rem;

    left: 42.4rem;


    height: 5.4rem;

    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.3rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv7 {
    position: absolute;
    top: 11rem;
    left: 42rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv6 {
    position: absolute;
    top: 11rem;
    left: 35.6rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv5 {
    position: absolute;
    top: 11rem;
    left: 29.2rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv4 {
    position: absolute;
    top: 11rem;
    left: 22.5rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv3 {
    position: absolute;
    top: 11rem;
    left: 16.3rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv2 {
    position: absolute;
    top: 11rem;
    left: 9.8rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 节点名称 */
.boxRightProcessTextDiv1 {
    position: absolute;
    top: 11rem;
    left: 3.4rem;
    height: 5.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    text-align: left;
    padding-top: .35rem;
    padding-left: .9375rem;
    font-size: 1.2rem;
    color: #ACB5C2;
    font-family: PingFang SC-Semibold;
    font-weight: 500;
}

/* 进度条位置 */
.boxRightProcess {
    position: absolute;
    top: 8.4925rem;
    left: 1.68rem;
    width: 32.1rem;
    height: 2.4rem;
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0);
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 2rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 患者信息 */
.boxRightPatientInfo {
    position: absolute;
    top: 6.5rem;
    /* 23.8% of 1080px */
    left: 1.64rem;
    /* 2.62% of 1920px */
    width: 16.875rem;
    height: 15rem;
    /* 25% of 1080px */
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: #2B3442;
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 1rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 患者信息 文案位置*/
.boxRightPatientInfoName {
    position: absolute;
    top: 1.4rem;
    left: 1.2rem;
    width: 9.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.625rem;
    color: #E5E6ED;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 患者姓名 医生姓名文案信息 */
.Name {
    position: absolute;
    top: 5rem;
    left: 1.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.125rem;
    color: #B0B8CD;
    line-height: 1.3125rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 性别，医生文案信息 */
.NameOrsex {
    position: absolute;
    top: 7.5rem;
    left: 1.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.125rem;
    color: #B0B8CD;
    line-height: 1.3125rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 年龄，医生文案信息 */
.NameOrAge {
    position: absolute;
    top: 10rem;
    left: 1.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.125rem;
    color: #B0B8CD;
    line-height: 1.3125rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 住院编号医生文案信息 */
.NameOrId {
    position: absolute;
    top: 12.5rem;
    left: 1.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.125rem;
    color: #B0B8CD;
    line-height: 1.3125rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}



/* 手术人员信息 */
.boxRightOperUserInfo {
    position: absolute;
    top: 6.5rem;
    /* 23.8% of 1080px */
    left: 19.62rem;
    width: 16.875rem;
    height: 15rem;
    /* 25% of 1080px */
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: #2B3442;
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 1rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 手术进程信息 时长  进度等信息 */
.boxRightOperGoingInfo {
    position: absolute;
    top: 6.5rem;
    /* 23.8% of 1080px */
    left: 37.62rem;
    width: 54.875rem;
    height: 15rem;
    /* 25% of 1080px */
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: #2B3442;
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 1rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 患者生命体征框 */
.boxRightLifeDateInfo {
    position: absolute;
    top: 6.5rem;
    /* 23.8% of 1080px */
    left: 19.62rem;
    width: 16.875rem;
    height: 15rem;
    /* 25% of 1080px */
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: #2B3442;
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 1rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}



/* CSS 动画 */
.scroll-text {
    white-space: nowrap;
    animation: scrollText 10s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* 进度条 */
.steps {
    /* 球球位置间隔 */
    top: -0.5rem;
    left: 3.125rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 40.5rem;
}

.step {
    /* 球球大小 */

    width: 1.75rem;
    height: 1.75rem;
    background: #787F8F;
    border: .145rem solid #b6b6b6;
    border-radius: 2rem;
    transition: background 1s;
}

.step.selected {
    /* 表示当前被选中的步骤，显示为带有蓝色实线边框的样式 */
    border: .175rem solid #ffffff;
}

.step.completed {
    /* 表示已经完成的步骤，不仅显示为带有蓝色实线边框，还会填充为蓝色背景。 */
    border: .125rem solid #1FA4D0;
    background: #1FA4D0;
    border: .145rem solid #ffffff;
    z-index: 1;
}

.progress {
    top: .14rem;
    left: .3rem;
    position: absolute;
    width: 150%;
    height: 1.225rem;
    /* 调整为1.225rem，使进度条更粗 */
    background-color: #787F8F;
    /* 背景颜色设置为灰色 */
    border-radius: .625rem;
    /* 设置圆角半径，使两端都为圆角 */
}

.percent {
    position: absolute;
    width: 0;
    /* 初始状态为0，使进度条空 */
    height: 100%;
    background: linear-gradient(106deg, #007CD3 0%, #3BC7CF 100%, #3BC8CF 100%, #3AC9CE 100%);
    /* 前景颜色设置为蓝色 */

    z-index: 1;
    transition: width 1s;
    border-radius: .625rem;
}

/* 生命体征 */
.boxRightVitalSignInfo {
    position: absolute;
    top: 22.64rem;
    /* 23.8% of 1080px */
    left: 1.64rem;
    /* 2.62% of 1920px */
    width: 35rem;
    height: 12rem;
    /* 25% of 1080px */
    bottom: 2.5rem;
    box-sizing: border-box;
    background-color: #2B3442;
    border-radius: .625rem;
    text-align: left;
    padding-top: .35rem;
    /* 5.6px */
    padding-left: .9375rem;
    /* 15px */
    font-size: 1rem;
    /* Equivalent to 16px */
    color: #11CABE;
    font-family: PingFang SC-Semibold;
}

/* 患者生命体征文案 */
.boxRightVitalSignText {
    position: absolute;
    top: 1.4rem;
    left: 1.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 1.625rem;
    color: #E5E6ED;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 患者生命体征文案后的时间 */
.boxRightVitalSignTextSJ {
    position: absolute;
    top: 1.9rem;
    left: 24.2rem;
    width: 19.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: .9rem;
    color: #878F9E;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* HR */
.hr {
    position: absolute;
    top: 4.2rem;
    left: 1.3rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1rem;
    color: #18B919;
    background-color: #333F4B;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 0.325rem;
    border-left: 0.35rem solid #18B919;
    padding-left: .6625rem;
    display: flex;
    align-items: center;
}

.hrDate {
    position: absolute;
    top: 0.02rem;
    left: 6.3rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.4rem;
    color: #18B919;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
}

.bp {
    position: absolute;
    top: 4.2rem;
    left: 18.1rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1rem;
    color: #E03363;
    background-color: #333F4B;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 0.325rem;
    border-left: 0.35rem solid #E03363;
    padding-left: .6625rem;
    display: flex;
    align-items: center;
}

.bpDate {
    position: absolute;
    top: 0.02rem;
    left: 6.3rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.4rem;
    color: #E03363;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
}

.spo2 {
    position: absolute;
    top: 8.0rem;
    left: 1.3rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1rem;
    color: #F4CC2C;
    background-color: #333F4B;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 0.325rem;
    border-left: 0.35rem solid #F4CC2C;
    padding-left: .6625rem;
    display: flex;
    align-items: center;
}

.spo2Date {
    position: absolute;
    top: 0.02rem;
    left: 6.3rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.4rem;
    color: #F4CC2C;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
}

.etco2 {
    position: absolute;
    top: 8.0rem;
    left: 18.1rem;
    width: 14.7rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1rem;
    color: #FFFFFF;
    background-color: #333F4B;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    border-radius: 0.325rem;
    border-left: 0.35rem solid #FFFFFF;
    padding-left: .6625rem;
    display: flex;
    align-items: center;

}

.etco2Date {
    position: absolute;
    top: 0.02rem;
    left: 6.3rem;
    width: 15.5rem;
    height: 3rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.4rem;
    color: #FFFFFF;
    line-height: 1.875rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
}



.vioce1 {
    position: absolute;
    top: 36.64rem;
    width: 16.875rem;
    height: 9rem;
    left: 1.64rem;
    border-radius: .625rem;
    box-shadow: 0 0 0 .0625rem rgba(119, 224, 129, 1), 0 0 0 .125rem rgba(59, 200, 207, 1);
    background: url('picture/shipin.png') no-repeat center;
    background-size: 19% 34%;
    background-position: center 49%;
    /* 调整图片居中偏上一点 */
}

.vioce1Date {
    position: absolute;
    top: 6.5rem;
    width: 19.875rem;
    height: 9.3rem;
    left: -1.5rem;
    color: #B0B8CD;
    font-size: 1rem;

}

.vioce1Name {
    position: absolute;
    top: 0.4rem;
    width: 19.875rem;
    height: 4rem;
    left: -7rem;
    color: #B0B8CD;
    font-size: 1rem;

}

.vioce1Time {
    position: absolute;
    top: 0.4rem;
    width: 19.875rem;
    height: 4rem;
    left: 4.5rem;
    color: #B0B8CD;
    font-size: 1rem;

}

.vioce2 {
    position: absolute;
    top: 36.64rem;
    width: 16.875rem;
    height: 9rem;
    left: 19.5rem;
    border-radius: .625rem;
    box-shadow: 0 0 0 .0625rem rgba(119, 224, 129, 1), 0 0 0 .125rem rgba(59, 200, 207, 1);
    background: url('picture/shipin.png') no-repeat center center;
    background-size: 18% 32%;
    background-position: center 49%;
}

.vioce2Date {
    position: absolute;
    top: 6.5rem;
    width: 19.875rem;
    height: 9.3rem;
    left: -1.5rem;
    color: #B0B8CD;
    font-size: 1rem;
}



/* 框you-下的样式 */
.boxRightLast {
    position: absolute;
    top: 22.64rem;
    /* 23.8% of 1080px */
    left: 37.62rem;
    width: 54.875rem;
    height: 23.2rem;
    /* 10% of 1080px */
    bottom: 2.5rem;
    background-color: #2B3442;
    border-radius: .625rem;
}

/* 事件广场文案 */
.square {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 1.3rem;
    width: 20.5rem;
    height: 2.25rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 2rem;
    color: #E5E6ED;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.squareDiv1 {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 3rem;
    width: 51.5rem;
    height: 2.25rem;
    border-radius: .625rem;
    /* 设置与height相同 */
}

.squareDiv2 {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 4.2rem;
    width: 51.5rem;
    height: 2.25rem;
    border-radius: .625rem;
    /* 设置与height相同 */
}

.squareDiv3 {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 5.4rem;
    width: 51.5rem;
    height: 2.25rem;
    /* 设置与height相同 */
}

.squareDiv4 {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 6.6rem;
    width: 51.5rem;
    height: 2.25rem;
    /* 设置与height相同 */
}

.squareDiv5 {
    position: relative;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 7.8rem;
    width: 51.5rem;
    height: 2.25rem;
    /* 设置与height相同 */
}

.squareText {
    font-family: PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    background-color: #323C48;
    text-align: left;
    line-height: 2.25rem;
    padding-left: 1rem;
    color: #ACB5C2;
    /* 确保文本内容距离左侧1rem */
}




/* 分离XL’s CSS */
.el-input__inner {
    background-color: #20282E !important;
    border-color: #6D7CAA !important;
    border-width: .18rem !important;
    border-radius: .625rem !important;
    height: 3rem !important;
    width: 14rem !important;
    top: 3.2rem !important;
    color: white !important;
    font-size: 1.2rem !important;


}

.el-input__icon el-icon-date {
    color: white !important;

}

.el-select .el-input.is-focus .el-input__inner {
    border-color: #6D7CAA !important;
}

/* 下拉框 */
.el-select-dropdown__empty {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    background-color: #202935;
    border-radius: 0.8rem;
    border: 1px solid rgb(109 124 170) !important;

}

.el-select-dropdown {
    /*  background-color: transparent !important; 透明色 */
    border: #6D7CAA !important;
    background-color: #42474d !important;
}

.el-input__icon {
    color: white;
    line-height: 3.8rem !important;
}

/* 外层容器样式 */
.outer-container {
    position: relative;
    width: 94rem;
    height: 52.37rem;
    left: 15.2rem;
    background: linear-gradient(to bottom, #232C3B, #20282E);
    z-index: 20;
    border: .125rem solid #46506D;
    border-radius: .625rem;
    top: 0.2rem;
}

/* 手术中状态标签样式 */
.surgery-status {
    position: absolute;
    width: 10rem;
    height: 5rem;
    background-color: blue;
    right: 0;
    color: #fff;
}

/* 标签栏容器样式 */
.tab-container {
    width: 90rem;
    height: 4rem;
    margin-left: 2rem;
    border-bottom: 1px solid rgba(176, 184, 205, 0.2);
}

/* 标签样式 手术信息外*/
.tabOper {
    width: 10rem;
    height: 100%;
    float: left;
}

/* 房间部分选择框 */
.custom-select .el-input__suffix {
    transform: rotate(180deg);
    /* 倒三角 */
}

.custom-select .el-input__inner {
    border-color: #1C1D23;
    /* 边框为灰色 */
}



/* 房间底色 */
.el-select-dropdown__item span {
    color: #fff !important;
}



.popper__arrow::after {
    top: 1px;
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #323232 !important;
}

.el-select-dropdown__item {

    height: 3rem !important;
    width: 8rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    left: 02rem !important;
    border-radius: 0.625rem !important;
}


/* 房间下拉框 选中背景色 鼠标不悬浮在上边 选中 */
.el-select-dropdown__item.hover {
    background-color: #78797b !important;
    height: 3rem !important;
    width: 8rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    left: 02rem !important;
    border-radius: 0.625rem !important;
}

/* 日历样式 */
.el-picker-panel__body {
    background-color: #1E1F25 !important;
    border-radius: 625rem !important;
}

.el-picker-panel {
    border: 1px solid #E4E7ED;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    background: #1E1F25 !important;
    border-radius: 4px;
    line-height: 30px;
    margin: 5px 0;
}

/* 不可选中 */
.el-date-table td.disabled div {
    background-color: #1E1F25 !important;
    opacity: 1;
    cursor: not-allowed;
    color: #1E1F25;

}

/* 年月日 */
.el-date-picker__header-label {
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    color: rgb(255, 255, 255) !important;
}

/* 周几 */
.el-date-table th {
    padding: 5px;
    color: rgb(201, 201, 201) !important;
    font-weight: 400;
    border-bottom: solid 1px #EBEEF5;
}

/* 横线 */
.el-date-table th {
    border-bottom: 1px solid rgb(255, 255, 255) !important;
}

.el-picker-panel {
    border-color: rgb(89, 100, 132) !important;
}

/* 底色文字 */
.el-date-table td span {
    color: rgb(201, 201, 201);
    /* 字体颜色 */
    font-family: "微软雅黑";
    /* 字体 */
    font-size: 1.4rem !important;
    /* 字体大小，您可以根据需要调整这个值 */
    font-weight: 400;
}

/* 按键颜色 */
.el-picker-panel__icon-btn {
    font-size: 12px;
    color: #d7dbe2 !important;
    border: 0;
    background: 0 0;
    cursor: pointer;
    outline: 0;
    margin-top: 8px;
}

/* 日历logo */
.el-input__prefix {
    top: -0.3rem !important;
}

.el-input__suffix {
    top: -.1rem !important;
}

/* 周几颜色 */
.el-date-table th {
    background-color: #2D2E36;
    padding: .05rem !important;
}

.el-date-table th:first-child {
    border-radius: .8rem 0rem 0rem .8rem;
}

.el-date-table th:last-child {
    border-radius: 0rem .8rem .8rem 0rem;
}

/* 下拉箭头 */
.el-select__caret el-input__icon el-icon-arrow-up {
    top: 1rem !important;
}

.el-icon-arrow-up:before {
    content: "\e6e1";
    position: relative;
    top: -.7rem;
}

.el-date-picker__header {
    margin: .75rem;
    text-align: center;
}

.el-scrollbar {
    color: rgb(255, 255, 255) !important;
}

.c {
    width: 108rem !important;
    column-count: 10;
    /* 设置为你想要的列数 */
}

.squareTitle {
    position: absolute;
    /* 或 absolute, fixed */
    left: 1.8rem;
    top: 5.2rem;
    width: 10.5rem;
    height: 16.45rem;
    border-radius: .5rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 1.9rem;
    color: #ffffff;
    background-color: #2B3442;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #f4f4f4;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    /* 添加过渡效果 */
}

.button.active {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    /* 添加选中时的浮色效果 */
}


/* 人员进场 */
.custom-button1 {
    color: #FFFFFF;
    position: absolute;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.custom-button2 {
    position: absolute;
    color: #FFFFFF;
    top: 2.8rem;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.custom-button3 {
    position: absolute;
    color: #FFFFFF;
    top: 5.6rem;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.custom-button4 {
    position: absolute;
    color: #FFFFFF;
    top: 8.4rem;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.custom-button5 {
    position: absolute;
    color: #FFFFFF;
    top: 11.2rem;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.custom-button6 {
    position: absolute;
    color: #FFFFFF;
    top: 14rem;
    width: 9.375rem;
    height: 2.5rem;
    left: .5rem;
    font-size: 1.4rem;
    padding: .625rem 1.25rem;
    border: none;
    background-color: #333F4B;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    border-radius: .6rem;
    display: flex;
    /* 使用 flex 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.active {
    box-shadow: 0 0 1rem rgba(130, 255, 255, 0.5);

}

.img {
    display: block;
    max-width: 5rem;
    max-height: 5rem;
}